<template>
  <div class="photowall">
    <iv-row>
      <iv-col span="12" style="padding-left: 0;padding-right: 0;">
        <div class="big-photo">
          <a href="">
            <img src="https://scezu.oss-cn-beijing.aliyuncs.com/image/202012/photowall_pic_5.gif?versionId=CAEQIhiBgIDEisT.wRciIDc0MWNmMzY5NTcxNjRiNmJhNDBlODhkOTYyODE5N2Y1" alt="">
          </a>
        </div>
      </iv-col>
      <iv-col span="12" style="padding-left: 0;padding-right: 0;">
        <iv-row>
          <iv-col span="12" style="padding-left: 0;padding-right: 0;">
            <div class="small-photo">
              <a href="">
                <img src="https://scezu.oss-cn-beijing.aliyuncs.com/image/202012/photowall_pic_2.jpg?versionId=CAEQIhiBgICLicT.wRciIDBjZThkZGJkZjQ0YTRjNmM5ZDU3YjA5ODk1MzUzM2Fl" alt="">
              </a>
            </div>
          </iv-col>
          <iv-col span="12" style="padding-left: 0;padding-right: 0;">
            <div class="small-photo">
              <a href="">
                <img src="https://scezu.oss-cn-beijing.aliyuncs.com/image/202012/photowall_pic_3.gif?versionId=CAEQIhiBgMCticT.wRciIGQ4Nzg1MmYzZWM1NDQ4NTJiMGY2NGYzNDY4YTA2MWUx" alt="">
              </a>
            </div>
          </iv-col>
        </iv-row>
        <iv-row>
          <iv-col span="12" style="padding-left: 0;padding-right: 0;">
            <div class="small-photo">
              <a href="">
                <img src="https://scezu.oss-cn-beijing.aliyuncs.com/image/202012/photowall_pic_4.jpg?versionId=CAEQIhiBgMDAisT.wRciIDAyMDkzNzk5NjRiYzQ5ZGRhMDc3MDNkMjg2NGYyMTIy" alt="">
              </a>
            </div>
          </iv-col>
          <iv-col span="12" style="padding-left: 0;padding-right: 0;">
            <div class="small-photo">
              <a href="">
                <img src="https://scezu.oss-cn-beijing.aliyuncs.com/image/202012/photowall_pic_1.jpg?versionId=CAEQIhiBgICeisT.wRciIGQ2NmFkMTk3M2VjMTQyOGI4ZTkyOTVjNTk5YWRlMmY3" alt="">
              </a>
            </div>
          </iv-col>
        </iv-row>
      </iv-col>
    </iv-row>
  </div>
</template>

<script type="text/ecmascript-6">

</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .photowall
    .big-photo
      padding-bottom: 100%
      width: 100%
      height: 0
      overflow hidden
      a
        display: block
        width: 100%
        img
          width 100%
          transition: All 0.4s ease-in-out
          transform: scale(1.0)
          zoom: 1.0
      &:hover
        img
          transition: All 0.4s ease-in-out
          transform: scale(1.05)
          zoom: 1.05
    .small-photo
      padding-bottom: 100%;
      width: 100%;
      height: 0;
      overflow hidden
      a
        display: block
        width: 100%
        img
          width 100%
          transition: All 0.4s ease-in-out
          transform: scale(1.0)
          zoom: 1.0
      &:hover
        img
          transition: All 0.4s ease-in-out
          transform: scale(1.05)
          zoom: 1.05

</style>
